
<template>
  <div class="contentBox">
    <searchTop :isBottmNavigation="false"></searchTop>
    <banner :imglist="imglist"></banner>
    <div class="indexline"></div>
    <div class="flex list cof">
      <img src="../../../assets/Image/img_left.png" alt="" />
      <div class="flex list_right printLogFather" infinite-scroll-distance="30px" v-infinite-scroll="load"
        style="height:100vh;overflow: auto;">
        <div class="item" v-for="(item, index) in tableData1" :key="index" @click="router.push({path:'/goodsDetail',query:{id: item.id}})">
          <img :src="item.image" style="width: 290px; height: 290px" alt="" />
          <div class="pad20">
            <div class="co3 fontS20 dian">{{ item.product_name }}</div>
            <p style="margin-top: 20px">
              <span class="fontS20 homeRed">¥</span>
              <span class="fontS28 homeRed">{{ item.price }}</span>
            </p>
          </div>
        </div>
      </div>
      <!-- <list :data="tableData1"></list> -->
    </div>
    <div class="list2" style="padding: 40px;box-sizing: border-box;background-color: #ffffff;margin-top: 40px;">
      <div>
        <P class="fontS24 homeRed bold">商品精选</P>
      </div>
      <div class="flex" style="margin-top: 40px;">
        <div @click="typeChange(item)" class="homeRed fontS18  bold black"
          :class="typeCheck == item.store_category_id ? 'border' : ''" v-for="(item) in typeList"
          :key="item.store_category_id" style="margin-right: 60px;">
          {{ item.cate_name }}
        </div>
      </div>
      <div class="flex printLogFather" style="flex-wrap: wrap;  margin-top: 46px;overflow: auto;"
        infinite-scroll-distance="30px" v-infinite-scroll="load2">
        <div class="item2" v-for="(item, index) in tableData2" :key="index" @click="router.push({path:'/goodsDetail',query:{id: item.id}})">
          <img :src="item.image" style="width: 336px; height: 336px" alt="" />
          <div class="pad20">
            <div class="co3 fontS20 dian">{{ item.product_name }}</div>
            <p style="margin-top: 20px"> 
              <span class="fontS20 homeRed">¥</span>
              <span class="fontS28 homeRed">{{ item.price }}</span>
              <span class="fontS18 co9" style="margin-left: 14px;">{{ item.month_number }}人已付款</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";

import searchTop from "../../../components/searchTop.vue"; //搜索组件
import banner from "./banner.vue";
import list from "./list.vue";

import {
  getPlatformTypeProductStrict,
  ProductgetPlatFormTypeProductType,
  comgetAd,
  overSeagoods1,
  overSeagoods2,
  getGoods
} from "../../../utils/api";


const router = useRouter(); 
console.log(router)
const platform_type_id =router.currentRoute.value.query.platform_type_id; // 大分类ID

let typeCheck: any = ref('');//海外专区的类型
let items: any = reactive({});//海外专区的类型
let keywords: any = ref('');//海外专区的类型
let typeList: any = ref([]);//海外专区的类型
const tableData: any = ref([]);
const tableData1: any = ref([]);
const tableData2: any = ref([]);
const page1: any = ref('1');
const page1last: any = ref('1');
const page2: any = ref('1');
const page2last: any = ref('1');

const load = () => {
  console.log(999999999999);
  if (page1.value == page1last.value || page1.value > page1last.value) {
    return
  }
  getGoods1()
}
const load2 = () => {
  console.log(88888888);
  if (page1.value == page1last.value || page1.value > page1last.value) {
    return
  }
  getGoods2(items)
}
const imglist = ref([]);
comgetAd({ type: 0, type_id: platform_type_id }).then((res) => {
  console.log(res, "严选banner");
  imglist.value = res.data;
});

// const getlist = () => {
const getGoods1 = () => {
  overSeagoods1({
    platform_type_id: platform_type_id,
  }).then((res) => {
    console.log(res, "/////rsss");
    page1last.value = res.data.current_page
    if (res.data.current_page == 1) {
      page1.value = res.data.current_page
      tableData1.value = res.data.data;
    } else {
      page1.value = res.data.current_page
      tableData1.value.push(res.data.data);
    }
  });
}
getGoods1()

const getGoods2 = (item: any) => {
  overSeagoods2({
    platform_type_id: Number(platform_type_id),
    page: 1,
    limit: 10,
    category_id: item.store_category_id,//小分类
    search_key: keywords.value
  }).then(res => {
    if (res.data.current_page == 1) {
      page2.value = res.data.current_page
      page2last.value = res.data.current_page
      tableData2.value = res.data.data
    } else {
      page2.value = res.data.current_page
      page2last.value = res.data.current_page
      tableData2.value.push(res.data.data) 
    }

  })

}
const typeChange = (item: any) => {
  items = item
  typeCheck.value = item.store_category_id
  page2.value = 1
  page2last.value = 1
  getGoods2(item) 
}

// };
// getlist()

// const getGoods1=()=>{
//     overSeagoods1({platform_type_id:''}).then(res=>{

//     })
// }

const getData = (id: number, index: number, item: any) => {
  let paraams = { platform_type_id, category_id: id };
  console.log(paraams, "//////////");

  getPlatformTypeProductStrict(paraams).then((res) => {
    let str = {
      name: item.cate_name,
      id: "id" + item.store_category_id,
      list: res.data.data,
    };
    tableData.value.push(str);
  });
};

const getType = () => {
  tableData.value = [];
  ProductgetPlatFormTypeProductType({ platform_type_id }).then((res) => {
    console.log(res, "海外专区商品类型");
    typeList.value = res.data
    typeChange(typeList.value[0])
    // res.data.forEach((item: any, index: number) => {
    //   getData(item.store_category_id, index, item);
    // });
  });
};
getType();

// 列表
</script>


<style scoped lang="less">
.black {
  color: black;
}

.contentBox {
  max-width: 1920px;
  margin: 0 auto;
  background: #f5f5f5;
}

.indexline {
  width: 1920px;
  height: 30px;
  /* background: #f0aa77; */
}

.list {
  width: 1470px;
  height: 884px;
  margin: 0 auto;
  overflow: hidden;
  /* border: 1px solid red; */
}

.list2 {
  width: 1470px;
  //   height: 884px;
  margin: 0 auto;
}

.item {
  width: 290px;
  height: 430px;
  /* border: 1px solid red; */
  margin-right: 19px;
  margin-bottom: 30px;
}

.item:nth-child(4n) {
  margin-right: 0px;
}

.item2 {
  width: 336px;
  height: 430px;
  /* border: 1px solid red; */
  margin-right: 15px;
  margin-bottom: 70px;

}

.item2:nth-child(4n) {
  margin-right: 0px;
}

.pad20 {
  background-color: white !important;
  padding: 20px;
}

.list_right {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  // padding-top: 510px;
}

.dian {
  height: 40px;
  width: 240px;
  line-height: 40px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.border {
  padding-bottom: 4px;
  border-bottom: 2px solid #DD2131;
  color: #DD2131;
}

.bold {
  font-weight: bold;
}
</style>
